<script setup lang="ts">

import {message} from "ant-design-vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import TradeConstituteChart
  from "~/contentScripts/views/sycm/shop_analysis/SycmShopAnalysisCateTrade/TradeConstituteChart.vue";
import {Shop, ShopLists, SycmShopAnalysisSale} from "~/contentScripts/views/sycm/shop_analysis/SycmShopAnalysisSale";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import RenderOption from "~/utils/render/renderOption";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const shopLists = ref<ShopLists>();
const dates = ref<Array<String>>([]);
const columns = ref<Array<any>>([]);
const dataSource = ref<Array<any>>([]);
const activeKey = ref<string>('1');
const calcDataSource = () => {
  dataSource.value = [];
  const data: any[] = [];
  if (activeKey.value == '1') {
    shopLists.value?.selfShop?.CateTradeData.forEach((table: any, index: number) => {
      const obj = {
        shop: {
          title: shopLists.value?.selfShop?.title,
          logo: shopLists.value?.selfShop?.logo,
          shopId: shopLists.value?.selfShop?.shopId,
        },
        type: '本店',
        ...{
          cateId: shopLists.value?.selfShop?.CateTradeData[index].cateId ?? {value: null},
          cateLevel1Id: shopLists.value?.selfShop?.CateTradeData[index].cateLevel1Id ?? {value: null},
          cateLevel1Name: shopLists.value?.selfShop?.CateTradeData[index].cateLevel1Name ?? {value: null},
          cateName: shopLists.value?.selfShop?.CateTradeData[index].cateName ?? {value: null},
          payAmtRatio: shopLists.value?.selfShop?.CateTradeData[index].payAmtRatio ?? {ratio: 0},
        }
      };
      data.push(obj);
    });
    if (shopLists.value?.shop1) {
      shopLists.value?.shop1?.CateTradeData.forEach((table: any, index: number) => {
        const obj = {
          shop: {
            title: shopLists.value?.shop1?.title,
            logo: shopLists.value?.shop1?.logo,
            shopId: shopLists.value?.shop1?.shopId,
          },
          type: '竞店1',
          ...{
            cateId: shopLists.value?.shop1?.CateTradeData[index].cateId ?? {value: null},
            cateLevel1Id: shopLists.value?.shop1?.CateTradeData[index].cateLevel1Id ?? {value: null},
            cateLevel1Name: shopLists.value?.shop1?.CateTradeData[index].cateLevel1Name ?? {value: null},
            cateName: shopLists.value?.shop1?.CateTradeData[index].cateName ?? {value: null},
            payAmtRatio: shopLists.value?.shop1?.CateTradeData[index].payAmtRatio ?? {ratio: 0},
          }
        };
        data.push(obj);
      });
    }
    if (shopLists.value?.shop2) {
      shopLists.value?.shop2?.CateTradeData.forEach((table: any, index: number) => {
        const obj = {
          shop: {
            title: shopLists.value?.shop2?.title,
            logo: shopLists.value?.shop2?.logo,
            shopId: shopLists.value?.shop2?.shopId,
          },
          type: '竞店2',
          ...{
            cateId: shopLists.value?.shop2?.CateTradeData[index].cateId ?? {value: null},
            cateLevel1Id: shopLists.value?.shop2?.CateTradeData[index].cateLevel1Id ?? {value: null},
            cateLevel1Name: shopLists.value?.shop2?.CateTradeData[index].cateLevel1Name ?? {value: null},
            cateName: shopLists.value?.shop2?.CateTradeData[index].cateName ?? {value: null},
            payAmtRatio: shopLists.value?.shop2?.CateTradeData[index].payAmtRatio ?? {ratio: 0},
          }
        };
        data.push(obj);
      });
    }
  } else {
    shopLists.value?.selfShop?.PriceTradeData.forEach((table: any, index: number) => {
      const obj = {
        shop: {
          title: shopLists.value?.selfShop?.title,
          logo: shopLists.value?.selfShop?.logo,
          shopId: shopLists.value?.selfShop?.shopId,
        },
        type: '本店',
        ...{
          priceSegName: shopLists.value?.selfShop?.PriceTradeData[index].priceSegName ?? {value: null},
          priceSegId: shopLists.value?.selfShop?.PriceTradeData[index].priceSegId ?? {value: null},
          payAmtRatio: shopLists.value?.selfShop?.CateTradeData[index].payAmtRatio ?? {ratio: 0},
        }
      };
      data.push(obj);
    });
    if (shopLists.value?.shop1) {
      shopLists.value?.shop1?.PriceTradeData.forEach((table: any, index: number) => {
        const obj = {
          shop: {
            title: shopLists.value?.shop1?.title,
            logo: shopLists.value?.shop1?.logo,
            shopId: shopLists.value?.shop1?.shopId,
          },
          type: '竞店1',
          ...{
            priceSegName: shopLists.value?.shop1?.PriceTradeData[index].priceSegName ?? {value: null},
            priceSegId: shopLists.value?.shop1?.PriceTradeData[index].priceSegId ?? {value: null},
            payAmtRatio: shopLists.value?.shop1?.CateTradeData[index].payAmtRatio ?? {ratio: 0},
          }
        };
        data.push(obj);
      });
    }
    if (shopLists.value?.shop2) {
      shopLists.value?.shop2?.PriceTradeData.forEach((table: any, index: number) => {
        const obj = {
          shop: {
            title: shopLists.value?.shop2?.title,
            logo: shopLists.value?.shop2?.logo,
            shopId: shopLists.value?.shop2?.shopId,
          },
          type: '竞店2',
          ...{
            priceSegName: shopLists.value?.shop2?.PriceTradeData[index].priceSegName ?? {value: null},
            priceSegId: shopLists.value?.shop2?.PriceTradeData[index].priceSegId ?? {value: null},
            payAmtRatio: shopLists.value?.shop2?.CateTradeData[index].payAmtRatio ?? {ratio: 0},
          }
        };
        data.push(obj);
      });
    }
  }

  // console.log(data);
  dataSource.value = data;
};
const calcColumns = () => {
  if (activeKey.value == '1') {
    columns.value = [
      {
        dataIndex: 'shop.title',
        title: '店铺名称',
        width: 180,
        dataType: 'shop',
        sorter: (a: any, b: any) => a.shop.title.localeCompare(b.shop.title),
        dataField: {
          shop_title: 'shop.title',
          shop_pic: 'shop.logo',
          shop_id: 'shop.shopId',
        },
      },
      {
        dataIndex: 'type',
        title: '类别',
        width: 80,
        sorter: (a: any, b: any) => a.type.localeCompare(b.type),
        dataType: 'custom',
        slot: 'type',
      },
      {
        dataIndex: 'cateLevel1Name.value',
        title: '父级行业类目',
        sorter: (a: any, b: any) => a.cateLevel1Name.value.localeCompare(b.cateLevel1Name.value),
      },
      {
        dataIndex: 'cateName.value',
        title: '类目名称',
        sorter: (a: any, b: any) => a.cateName.value.localeCompare(b.cateName.value),
      },
      {
        dataIndex: 'payAmtRatio.ratio',
        title: '支付金额占比',
        width: 120,
        sorter: (a: any, b: any) => a.payAmtRatio.ratio - b.payAmtRatio.ratio,
        align: 'right',
        dataType: 'customRender',
        render: (item: any) => {
          if (!item || isNaN(item)) {
            return '0.00%';
          }
          return (item * 100).toFixed(2) + '%';
        }
      }
    ];
  } else {
    columns.value = [
      {
        dataIndex: 'shop.title',
        title: '店铺名称',
        // width: 180,
        dataType: 'shop',
        sorter: (a: any, b: any) => a.shop.title.localeCompare(b.shop.title),
        dataField: {
          shop_title: 'shop.title',
          shop_pic: 'shop.logo',
          shop_id: 'shop.shopId',
        },
      },
      {
        dataIndex: 'type',
        title: '类别',
        width: 80,
        sorter: (a: any, b: any) => a.type.localeCompare(b.type),
        dataType: 'custom',
        slot: 'type',
      },
      {
        dataIndex: 'priceSegName.value',
        title: '价格带',
        sorter: (a: any, b: any) => a.priceSegName.value.localeCompare(b.priceSegName.value),
      },
      {
        dataIndex: 'payAmtRatio.ratio',
        title: '支付金额占比',
        // width: 120,
        align: 'right',
        sorter: (a: any, b: any) => a.payAmtRatio.ratio - b.payAmtRatio.ratio,
        dataType: 'customRender',
        render: (item: any) => {
          if (!item || isNaN(item)) {
            return '0.00%';
          }
          return (item * 100).toFixed(2) + '%';
        }
      }
    ];
  }

}
const option:RenderOption = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  },option)) {
    loading.value = true;
    const data = await SycmShopAnalysisSale.assignShopCateTradeData(await SycmShopAnalysisSale.getShops());
    if (!data) {
      message.error('获取数据失败,请重试!');
      loading.value = false;
      return;
    }
    shopLists.value = data;
    calcColumns();
    calcDataSource();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, () => {
  calcColumns();
  calcDataSource();
}, {deep: true});
watch(() => activeKey.value, () => {
  calcColumns();
  calcDataSource();
}, {deep: true});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞店分析-销售分析-交易构成`" width="1200px" style="top: 20px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="height: calc(100vh - 150px);overflow-y: auto;">
        <a-tabs v-model:active-key="activeKey">
          <a-tab-pane key="1" tab="类目构成">
          </a-tab-pane>
          <a-tab-pane key="2" tab="价格构成">
          </a-tab-pane>
        </a-tabs>
        <TradeConstituteChart :shop-lists="shopLists" :active-key="activeKey"/>
        <base-table table-name="竞争-竞店分析-销售分析-交易构成" :columns="columns" :data-source="dataSource"
                    :scroll="{
        // y:750,
        y:450,
      }"
        >
          <template #type="record">
            <a-tag color="green" v-if="record.type==='本店'">
              本店
            </a-tag>
            <a-tag color="purple" v-else-if="record.type==='竞店1'">
              竞店1
            </a-tag>
            <a-tag color="orange" v-else-if="record.type==='竞店2'">
              竞店2
            </a-tag>
          </template>
        </base-table>
      </div>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
